<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    {% extends 'views/base.html' %}
    {% block body %}
    <form action="/posts/{{post._id}}/edit" method="POST">
        <header class="editor-header">
            <input name="title" value={{post.title}} class="input is-shadowless is-radiusless" type="text"
                placeholder="输入文章标题...">
            <div class="right-box">
                <div class="select is-small">
                    <select name="category">
                        <option disabled="disabled">分类</option>
                        {% for category in categories %}
                        <option value={{category._id}}>{{category.title}}</option>
                        {% endfor %}
                    </select>
                </div>
                <button type="submit" class="button is-small is-primary">更新</button>
            </div>
        </header>
        <div id="editor">
            <textarea autofocus="autofocus" name="content" class="input" name="content">{{post.content}}</textarea>
            <div class="show content markdown-body"></div>
        </div>
    </form>
    <nav class="navbar has-shadow">
        <div class="navbar-brand">
            <a class="navbar-item" href="/">
                JS之禅
            </a>
        </div>
    </nav>
    {% block script %}
    <script src="https://cdn.bootcss.com/marked/0.3.19/marked.min.js"></script>
    <script>
        var input = $('#editor .input')
        $('#editor .show').html(marked(input.val()))
        input.on('input', function () {
            $('#editor .show').html(marked($(this).val(), { sanitize: true }))
        })
    </script>
    {% endblock %}
    {% endblock %}

</body>

</html>